<template>
	<div class="banner">
		<img :src="urlimg">
		<div>{{fo.title}}</div>
	</div>
</template>

<script>
	export default {
		name: 'banner',
		props: ['fo'],
		data: function() {
			return {
				urlimg: '',
				foo:this.fo
			}
		},
		mounted: function() {
			this.urlimg ='//fuss10.elemecdn.com'+this.foo.image_url+'?imageMogr/format/webp/';
//			console.log(this.urlimg)
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.banner {
		float: left;
		width: 25%;
		text-align: center;
		height: 100px;
		font-size: 0.5rem;
		padding: 10px 0;
	}
	
	.banner img {
		width: 65px;
		height: 65px;
	}
</style>